<template>
  <div class="agent_recharge_inquiry">
    <el-form :inline="true" :model="elform" class="demo-form-inline" size="mini">
      <el-form-item label="操作类型:" label-width="80px">
        <el-select
          v-model="topuptype"
          placeholder="请选择"
          size="mini"
          clearable
          @clear="clearclass()"
          @change="chioceclass()"
        >
          <el-option
            v-for="item in topupoption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="充值日期:" label-width="80px">
        <el-date-picker
          v-model="value1"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期时间"
        ></el-date-picker>
        <span>至</span>
        <el-date-picker
          v-model="value2"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="gosearch" size="mini" icon="el-icon-search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="exportexeclto" size="mini">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="dataListLoading"
      :data="tableinformation"
      style="width:100%"
      border="border"
      :header-cell-style="headFirst"
      highlight-current-row
      height="60vh"
      :cell-style="(res) => headFirst_col(res, [])"
    >
      <el-table-column prop="userName" label="代理商名称"></el-table-column>
      <el-table-column label="金额数量(元)">
        <template slot-scope="scope">
          <div>{{scope.row.moneyAmount | amountyuan}}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作类型">
        <template slot-scope="scope">
          <div>{{scope.row.operateType | filetsoperateTypet }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="operateTime" label="操作起始时间" width="180%"></el-table-column>
      <el-table-column label="充值分钟数">
        <template slot-scope="scope">
          <div>{{scope.row.secondsAmount | timeconversion }}</div>
        </template>
      </el-table-column>
      <el-table-column label="充值前可用分钟数">
        <template slot-scope="scope">
          <div>{{scope.row.secondsBefore | timeconversion }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="secondsAfter" label="充值后可用分钟数">
        <template slot-scope="scope">
          <div>{{scope.row.secondsAfter | timeconversion }}</div>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChangepage"
        @current-change="handleCurrentChangepage"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="recordCount"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      elform: {},
      topupoption: [
        {
          value: "0",
          label: "充值"
        },
        {
          value: "1",
          label: "减款"
        }
      ],
      topuptype: "",
      value1: "",
      value2: "",
      pageNum: 1,
      pageSize: 20,
      recordCount: 0,
      currentPage: 1,
      userName: "",
      value1: "",
      value2: "",
      messageType: 0,
      tableinformation: [],
      //权限验证
      identity: "",
      //登录id
      userGuid: "",
      searchInfo: {},
      agentlistout: [],
      dataListLoading: false
    };
  },
  filters: {
    filetsoperateTypet: function(operateType) {
      if (operateType == "0") {
        return "充值";
      }
      if (operateType == "1") {
        return "减款";
      }
    }
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid;
      }
    }
  },
  methods: {
    gosearch() {
      this.pageNum = 1;
      this.searchInfo = {};
      if (this.value1 !== null && this.value1 !== "") {
        this.searchInfo.startTime = this.value1;
      }
      if (this.value2 !== null && this.value2 !== "") {
        this.searchInfo.endTime = this.value2;
      }
      if (this.topuptype !== null && this.topuptype !== "") {
        this.searchInfo.operateType = this.topuptype;
      }
      this.searchInfo.userGuid = this.changeschoolid;
      this.searchinit();
    },
    searchinit() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/voip/recharge/agent-recharge-page"),
        method: "post",
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: this.searchInfo
          },
          messageType: this.messageType
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.tableinformation = data.messageContent.data;
          this.recordCount = data.messageContent.recordCount;
          this.currentPage = data.messageContent.pageNum;
          this.dataListLoading = false;
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },
    handleSizeChangepage(val) {},
    handleCurrentChangepage(val) {},
    exportexeclto() {}
  }
};
</script>

<style lang="scss" scoped>
.agent_recharge_inquiry {
  padding: 20px;
  .demo-form-inline,
  .demo-form-inline1 {
    height: 50px;
    width: 1234px;
    display: flex;
    /deep/.el-form-item__label {
      padding-right: 5px;
    }
    .el-form-item {
      margin-bottom: 0px;
    }
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 250px;
    }
  }
  .page {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>